<template>
  <ve-card
    :title="'保养单号：' + record.maintenanceNo"
    :sub-title="record.assetFeeStatusName"
    :type="getCardType(record)"
    @click="toDetail(record.id)"
  >
    <ve-cell label="下次保养里程">{{ record.estimatedKilometre || '-' }} 公里</ve-cell>
    <ve-cell-val label="下次保养日期" :value="record.estimatedTime" />
    <ve-cell label="保养单关联门店">{{ record.siteName || '-' }}</ve-cell>
    <ve-cell label="本次保养里程">{{ record.entranceKilometre || '-' }} 公里</ve-cell>
    <ve-cell label="本次保养日期">{{ record.entranceDate || '-' }}</ve-cell>
    <ve-cell label="修理厂">{{ record.maintenanceShop || '-' }}</ve-cell>
    <ve-cell label="收支类型">{{ record.costTypeName || '-' }}</ve-cell>
    <ve-cell-price label="保养费" :value="record.maintenanceAmount"></ve-cell-price>
    <ve-cell label="负责人">{{ record.undertaker || '-' }}</ve-cell>

    <ve-operate-list v-if="operatable" :operates="operates" :record="record" />
  </ve-card>

  <!-- 二次确认 -->
  <ve-confirm titleText="提示" v-model="confirmVisible" @confirm="handleDelete">
    <view class="confirmCont">
      <view>请再次确认是否删除保养记录？</view>
    </view>
  </ve-confirm>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { deleteApi } from '@/api/asset/car-maintenance'
  import { usePermission } from '@/hooks/usePermission'

  const props = defineProps({
    record: {
      type: Object,
      default: () => {},
    },
    operatable: {
      type: Boolean,
      default: true,
    },
  })

  const confirmVisible = ref(false)
  const currentClose = ref<any>({})
  const handleDelete = () => {
    deleteApi({ id: currentClose.value.id }).then(() => {
      uni.showToast({
        title: '删除成功',
        icon: 'success',
      })
      confirmVisible.value = false
      uni.$emit('carMaintenance_getList')
    })
  }

  const toDetail = (id) => {
    if (usePermission('svmsapp:car-manage.detail.maintenanceRecord.detail')) {
      uni.navigateTo({
        url: '/pages/asset/car-maintenance/detail?id=' + id,
      })
    }
  }

  const operates = ref([
    {
      label: '详情',
      permission: 'svmsapp:car-manage.detail.maintenanceRecord.detail',
      method: (record) => {
        toDetail(record.id)
      },
    },
    {
      label: '编辑',
      permission: 'svmsapp:car-manage.detail.maintenanceRecord.edit',
      method: (record: any) => {
        // 0 待保养 1 保养中 2 保养完成 7 已关闭
        uni.navigateTo({
          url: `/pages/asset/car-maintenance/form?id=${record.id}`,
        })
      },
    },
    {
      label: '结算',
      permission: 'svmsapp:car-manage.detail.maintenanceRecord.settlement',
      show: (record) => {
        // 0未付款,1已付款,5已驳回
        return [0, 5].includes(record.assetFeeStatus)
      },
      method: (record) => {
        uni.navigateTo({
          url: '/pages/asset/asset-fee/settlement-fee?id=' + record.assetFeeId,
        })
      },
    },
    {
      label: '操作记录',
      permission: 'svmsapp:car-manage.detail.maintenanceRecord.operateLog',
      method: (record) => {
        uni.navigateTo({
          url: '/pages/utils/logs?type=3&id=' + record.id,
        })
      },
    },
    {
      label: '删除',
      permission: 'svmsapp:car-manage.detail.maintenanceRecord.delete',
      method: (record) => {
        currentClose.value = record
        confirmVisible.value = true
      },
    },
  ])
  const getCardType = (record) => {
    // assetFeeStatus 0未付款 1已付款 5已驳回
    const feeStatusMap = {
      0: 'yellow',
      1: 'blue',
      5: 'gray',
    }
    // 获取对应的 cardType，若无匹配则返回默认值 'gray'
    return feeStatusMap[record.assetFeeStatus] || 'gray'
  }
</script>

<style lang="less" scoped>
  .card-footer {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .card-footer {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx 0;

      .operate-list {
        width: 100%;
        font-size: 28rpx;
        font-weight: 400;
        color: #8491a8;
      }

      .ve-button {
        margin-left: 24rpx;
        margin-bottom: 24rpx;
      }
    }
  }
  :deep(.ve-cell-title) {
    width: 220rpx;
    max-width: 220rpx;
  }
</style>
